(function ($) {

   $.fn.pickList = function (options) {

      var opts = $.extend({}, $.fn.pickList.defaults, options);

      this.fill = function () {
         var option = '';

         $.each(opts.data, function (key, val) {
            option += '<option id=' + val.id + '>' + val.text + '</option>';
         });
         this.find('#pickData').append(option);
      };
      this.fillSelected = function () {
         var option = '';

         $.each(opts.selectedData, function (key, val) {
            option += '<option id=' + val.id + '>' + val.text + '</option>';
         });
         this.find('#pickListResult').append(option);
      };
      this.controll = function () {
         var pickThis = this;

         $("#pAdd").on('click', function () {
            var p = pickThis.find("#pickData option:selected");
            p.clone().appendTo("#pickListResult");
            p.remove();
             pickThis.setValues();
         });

         $("#pAddAll").on('click', function () {
            var p = pickThis.find("#pickData option");
            p.clone().appendTo("#pickListResult");
            p.remove();
             pickThis.setValues();
         });

         $("#pRemove").on('click', function () {
            var p = pickThis.find("#pickListResult option:selected");
            p.clone().appendTo("#pickData");
            p.remove();
             pickThis.setValues();
         });

         $("#pRemoveAll").on('click', function () {
            var p = pickThis.find("#pickListResult option");
            p.clone().appendTo("#pickData");
            p.remove();
            pickThis.setValues();
         });

          $("#pUp").on('click', function () {
              var pSel = pickThis.find("#pickListResult option:selected");
              var pAll = pickThis.find("#pickListResult option");
              if (pSel.length > 1 || pSel.index() - 1 < 0)
                  return true;
              else {
                  var opt, tmp;
                  opt = pAll[pSel.index() - 1];
                  $(opt).before(pSel);
                  pickThis.setValues();
                  return true;
              }
          });

          $("#pDown").on('click', function () {
              var pSel = pickThis.find("#pickListResult option:selected");
              var pAll = pickThis.find("#pickListResult option");
              if (pSel.length > 1 || pSel.index() + 1 >= pAll.length)
                  return true;
              else {
                  var opt, tmp;
                  opt = pAll[pSel.index() + 1];
                  $(opt).after(pSel);
                  pickThis.setValues();
                  return true;
              }
          });
      };
      this.getValues = function () {
         var objResult = [];
         this.find("#pickListResult option").each(function () {
            objResult.push({id: this.id, text: this.text});
         });
         return objResult;
      };

       this.setValues = function(){
           var _val = this.getValues();
           var ids = [];
           for(var i = 0; i < _val.length; i++)
           {
               ids.push(_val[i]['id']);
           }
           $('#pGameIds').val(ids.join(','));
       };
      this.init = function () {
         var pickListHtml =
                 "<style>" +
                 " .col-sm-5,.col-sm-2{float: left;}" +
                 " .row button{display: block;width: 30px;margin: 10px;border: none;height: 19px;line-height: 19px;}" +
                 " .row #pAdd{margin-top: 30px;}" +
                 " .row select#pickData,select#pickListResult{width: 190px;height: 185px;}" +
                 " .row h4{margin: 4px;}" +
                 "</style>" +
                 "<div class='row'>" +
                 "  <div class='col-sm-5'>" +
                 "	 <h4>游戏列表</h4>" +
                 "   <select id='pickData' multiple></select>" +
                 " </div>" +
                 " <div class='col-sm-2 pickListButtons'>" +
                 "	<button id='pAdd' type='button'>" + opts.add + "</button>" +
                 "  <button id='pAddAll' type='button'>" + opts.addAll + "</button>" +
                 "	<button id='pRemove' type='button'>" + opts.remove + "</button>" +
                 "	<button id='pRemoveAll' type='button'>" + opts.removeAll + "</button>" +
                 "	<button id='pUp' type='button'>" + opts.up + "</button>" +
                 "	<button id='pDown' type='button'>" + opts.down + "</button>" +
                 " </div>" +
                 " <div class='col-sm-5'>" +
                 "    <h4>关联列表</h4>" +
                 "   <select id='pickListResult' multiple></select>" +
                 " </div>" +
                 " <input type='hidden' name='game_ids' id='pGameIds' value='" + opts.gameIds + "'>" +
                 "</div>";

         this.append(pickListHtml);

         this.fill();
         this.controll();

         if(opts.selectedData.length > 0)
         {
            this.fillSelected();
         }
      };

      this.init();
      return this;
   };

   $.fn.pickList.defaults = {
       add: '>',
       addAll: '>>',
       remove: '<',
       removeAll: '<<',
       up: '↑',
       down: '↓',
       selectedData: {},
       gameIds: ''
   };


}(jQuery));


